<template>
  <el-container>

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleEdit(scope.$index, scope.row)">
      </el-button>

      <el-button
        icon="fa fa-fw fa-plus"
        size="mini"
        type="primary"
        @click="handleEdit(scope.$index, scope.row)">添加
      </el-button>

      <el-button
        icon="fa fa-fw fa-trash-o"
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)">删除
      </el-button>

      <el-button
        icon="fa fa-fw fa-toggle-on"
        size="mini"
        type="success"
        @click="handleDelete(scope.$index, scope.row)">启用
      </el-button>

      <el-button
        icon="fa fa-fw fa-toggle-off"
        size="mini"
        type="warning"
        @click="handleDelete(scope.$index, scope.row)">停用
      </el-button>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="agentName"
        label="代理名称"
        width="120">
      </el-table-column>

      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>

      <el-table-column
        prop="phoneNumber"
        label="手机号"
        width="120"
        sortable>
      </el-table-column>

      <el-table-column
        prop="agentRegion"
        label="代理区域"
        width="120">
      </el-table-column>

      <el-table-column
        prop="balance"
        label="金额"
        width="120"
        sortable>
      </el-table-column>

      <el-table-column
        prop="fallInto"
        label="分润百分比"
        width="120">
        <template slot-scope="scope">
          <el-tag type="primary">{{scope.row.fallInto}}%</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="date"
        label="操作时间"
        sortable>
        <template slot-scope="scope">
          <i class="fa fa-clock-o fa-fw"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="enabled"
        label="开启状态"
        width="120"
        sortable>
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.enabled==0">未开启</el-tag>
          <el-tag type="success" v-if="scope.row.enabled==1">已开启</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="fa fa-fw fa-pencil"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-cog"
            size="mini"
            type="primary"
            @click="configEdit(scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-trash-o"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-toggle-on"
            size="mini"
            type="success">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-toggle-off"
            size="mini"
            type="warning">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      handleEdit(index, row) {
        this.$router.push({
          name: 'AgentEditor',
          params: {
            id: 1
          }
        })
      },
      configEdit(index, row){
        this.$router.push({
          name: 'AgentConfigEditor',
          params: {
            id: 1
          }
        });
      },
      handleDelete(index, row) {
        console.log(index, row)
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
    },
    data() {
      return {
        tableData: [
          {
            agentName:'王者',
            name:'小星星',
            phoneNumber:'1324657479898',
            agentRegion:'西安',
            balance:'1000',
            fallInto:'60',
            date: '2018/7/8',
            enabled:'0',
          }
        ],
        multipleSelection: []
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row{
    width: 98% !important;
    margin: 15px auto;
  }
  .el-pagination{
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img{
    width: 40px;
    height: 40px;
  }
</style>
